<template>
    <div class = 'center'>
      <div class="user-logo">
          <div class="logo">
              <img :src="avator" alt=""> <span><router-link to="/user/login">{{ userId || '立即登录' }}</router-link></span>
          </div>
      </div>
      <div class="film">
          <router-link tag="div" to="/user/shopCar" class="films">
              <img src="@/assets/filmOrder.png" alt="">
              <h5>电影订单</h5>
          </router-link>
          <div class="pintuan">
              <img src="@/assets/pintuanOrder.png" alt="">
              <h5>拼团订单</h5>
          </div>
      </div>
      <div class="user-main">
          <div class="options">
              <ul>
                  <router-link to="/user/maizuo" tag="li"> <img src="@/assets/maizuo.png" alt=""> 卖座卡</router-link>
                  <router-link to="/user/yue" tag="li"> <img src="@/assets/yue.png" alt=""> 余额</router-link>
                  <router-link to="user/set" tag="li"> <img src="@/assets/set.png" alt=""> 设置</router-link>
              </ul>
          </div>
      </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'center',
  data () {
    return {
      avator: '/static/images/avator.png'
    }
  },
  created () {
    this.getUser()
  },
  computed: {
    ...mapState([
      'userId'
    ])
  },
  methods: {
    getUser () {
      var username = localStorage.getItem('user')
      if (username) {
        this.$store.commit('changeUserId', username)
        this.avator = 'https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png'
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.center{
    display: flex;
    flex-direction: column;
    flex: 1;
    .user-logo{
      position: relative;
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      height: px2rem(200);
      background: url('https://assets.maizuo.com/h5/v5/public/app/img/bg.043a928.png') no-repeat top center;
      .logo{
          display: flex;
          height: px2rem(70);
          line-height: px2rem(70);
          padding-left: px2rem(50);
          img{
              width: px2rem(67);
              border-radius: px2rem(67);
          }
          span{
              margin-left: px2rem(20);
              width: px2rem(200);
              overflow: hidden;
              a{
                  font-size: px2rem(20);
                  text-decoration: none;
                  color: #fff;
              }
          }
      }
    }
     .film{
          display: flex;
          text-align: center;
          h5{
              color: #797d82;
              font-size: px2rem(13);
          }
          img{
              width: px2rem(26);
               margin: px2rem(10) auto;
          }
          .films{
              flex: 1;
              text-align: center;
              padding: px2rem(10);
              display: flex;
              flex-direction: column;
          }
          .pintuan{
              flex: 1;
              text-align: center;
              padding: px2rem(10);
          }
      }
      .user-main{
          flex: 1;
          background-color: #F4F4F4;
          .options{
              margin-top: px2rem(20);
              padding: px2rem(20) px2rem(10);
              background-color: #fff;
              li{
                  display: flex;
                  height: px2rem(49);
                  line-height: px2rem(49);
                  color: #191a1b;
                  font-size: px2rem(13);
                  border-bottom: px2rem(1) solid #ededed;
                  img{
                      width: px2rem(20);
                       height: px2rem(20);
                       align-self: center;
                       margin-right: px2rem(10);
                  }
              }
          }
      }
}
</style>
